<template>
    <div class="swiper-container" id="floor1Swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="i in list" :key="i.id">
                <img :src="i.imgUrl">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>
 import Swiper from 'swiper'
export default {
    name:'Carousel',
    props:['list'],
    watch:{
        list:{
            //立即监听：不管你数据有没有变化，上来立即监听一次
            //为什么监听不到list：因为数据从来没有变化，数据是父亲给的
            immediate:true,
            handler(){
                this.$nextTick(()=>{
                    var mySwiper = new Swiper ('.swiper-container', {
                        //自动播放
                        // autoplay:true,
                        autoplay: {
                            delay: 3000,
                            stopOnLastSlide: false,
                            disableOnInteraction: false,
                        },
                        loop: true, // 循环模式选项
                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                            clickable:true
                        },
                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        }
                    }) 
                    // console.log(mySwiper);
                    // //鼠标移入 暂停
                    // mySwiper.el.onmouseover = function(e){
                    //     console.log('鼠标引入');
                    //     mySwiper.autoplay.stop();
                    // }
                    // //鼠标移出 开始
                    // mySwiper.el.onmouseout = function(e){
                    //     console.log('鼠标移出');
                    //     mySwiper.autoplay.start();
                    // }
                })
            }
        }
    }
}
</script>

<style>

</style>